<div class="service-deployment-section">
    <div class="service-loading-wrapper" ng-show="vm.loading"></div>
    <div class="service-deployment-container" ng-repeat="service in vm.serviceList"
         ng-class="{'opened': service.opened}">
        <ui-panel class="service-info-panel">
            <div class="row">
                <div class="col-sm-3">服务: {{service.podAppName || '-'}}</div>
                <div class="col-sm-3">镜像: {{(service.appImg.imageName && service.appImg.ver &&
                    service.appImg.imageName + ':' + service.appImg.ver.tag) || '-'}}
                </div>
                <div class="col-sm-2">容器数: {{service.podNum || '-'}}</div>
                <div class="col-sm-2 text-right">
                    <span class="text-danger">{{(service.$forms.base.$invalid && '请填写正确的配置') ||
                        (service.$forms.vol.$invalid && '挂载卷有误') ||
                        (service.$forms.log.$invalid && '日志挂载有误') ||
                        (service.$forms.res.$invalid && '资源配置有误') ||
                        (service.$forms.env.$invalid && '环境变量有误') ||
                        (service.$forms.ats.$invalid && '自动伸缩有误') ||
                        (service.$forms.domain.$invalid && '域名管理有误') || ''}}</span></div>
                <div class="col-sm-2 text-right">
                    <ul class="list-inline margin-bottom-0">
                        <li><a ng-click="vm.expendForm(service)" class="service-button" ng-switch="service.opened">
                            <span ng-switch-when="false"><i class="fa fa-pencil"/>编辑</span>
                            <span ng-switch-when="true"><i class="fa fa-long-arrow-up"/>收起</span></a></li>
                        <li><a ng-click="vm.deleteService($index)" class="service-button"><i class="fa fa-times"/>删除</a>
                        </li>
                    </ul>
                </div>
            </div>
        </ui-panel>
        <div class="service-form-container">
            <div class="row-box">
                <div class="row-box-desc panel">
                    <div>基本信息</div>
                </div>
                <div class="row-box-form panel">
                    <div class="panel-body">
                        <service-form-base/>
                    </div>
                </div>
            </div>
            <div class="row-box">
                <div class="row-box-desc">
                    <ul class="service-form-nav">
                        <li ng-class="{active: service.currentForm == 'vol',formErr: service.$forms.vol.$invalid}">
                            <a ng-click="service.currentForm='vol'">挂载卷</a>
                        </li>
                        <!--<li ng-class="{active: service.currentForm == 'log',formErr: service.$forms.log.$invalid}">
                            <a ng-click="service.currentForm='log'">日志挂载</a>
                        </li>-->
                        <li ng-class="{active: service.currentForm == 'res',formErr: service.$forms.res.$invalid}">
                            <a ng-click="service.currentForm='res'">资源配置</a>
                        </li>
                        <li ng-class="{active: service.currentForm == 'env',formErr: service.$forms.env.$invalid}">
                            <a ng-click="service.currentForm='env'">环境变量</a>
                        </li>
                        <li ng-class="{active: service.currentForm == 'ats',formErr: service.$forms.ats.$invalid}">
                            <a ng-click="service.currentForm='ats'">自动伸缩</a>
                        </li>
                        <li ng-class="{active: service.currentForm == 'domain',formErr: service.$forms.domian.$invalid}">
                            <a ng-click="service.currentForm='domain'">域名管理</a>
                        </li>
                    </ul>
                </div>
                <div class="panel row-box-form last-box-form">
                    <div class="panel-body">
                        <service-form-vol ng-show="service.currentForm == 'vol'"/>
                        <!--<service-form-log ng-show="service.currentForm == 'log'"/>-->
                        <service-form-res ng-show="service.currentForm == 'res'"/>
                        <service-form-env ng-show="service.currentForm == 'env'"/>
                        <service-form-ats ng-show="service.currentForm == 'ats'"/>
                        <service-form-domain ng-show="service.currentForm == 'domain'"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a class="service-button" ng-click="vm.addService()"><i class="fa fa-plus"/>添加服务</a>
</div>
<div class="panel-form-footer">
    <a ui-sref="app-service-publish.base" class="btn btn-default btn-sm">上一步</a>
    <button type="button" ng-disabled="vm.loading" ng-click="vm.next()" class="btn btn-primary btn-sm pull-right">
        <i ng-show="vm.loading" class="fa fa-cog fa-lg fa-spin margin-right-5"/>下一步
    </button>
    <div class="pull-right margin-right-30" style="line-height: 30px">
        <span class="text-danger" ng-show="!vm.serviceList.length">请至少添加一项服务</span>
    </div>
</div>